<template>
  <div class="song">
    <div class="container">
      <div class="top">
        <p
          class="iconfont icon-zuojiantou"
          style="font-size: 25px"
          @click="tohome()"
        ></p>
        <p>歌单</p>
        <p
          class="iconfont icon-24gf-ellipsisVertical"
          style="font-size: 25px"
        ></p>
        <p class="iconfont icon-paihangbang1" style="font-size: 25px"></p>
      </div>

      <div class="bod">
        <div class="imgs"><img src="../img/1.jpg" /></div>
        <div class="jieshao">
          <p>【吉他】走慢一点，时光其实和安恬。</p>
          <div class="mb">
            <img src="../img/2.jpg" />
            <p>aka小骨的小号&nbsp;&nbsp;&nbsp;></p>
          </div>
          <p>听着这些好听的歌可以做个好梦！当然可能也睡不着...</p>
        </div>
      </div>
      <div class="headr">
        <div class="headr-one">
          <div
            class="icon iconfont icon-duanxin"
            style="font-size: 30px"
            @click="toPinglun(id)"
          ></div>
          <p>114</p>
        </div>
        <div class="headr-two">
          <div
            class="icon iconfont icon-fenxiang"
            style="font-size: 30px"
          ></div>
          <p>92</p>
        </div>
        <div class="headr-three">
          <div
            class="icon iconfont icon-yunduanxiazai"
            style="font-size: 30px"
          ></div>
          <p>下载</p>
        </div>
        <div class="headr-four">
          <div
            class="icon iconfont icon-xuanze-duoxuan-tianchong"
            style="font-size: 30px"
          ></div>
          <p>多选</p>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="main-top">
        <div class="main-top-left">
          <p class="icon iconfont icon-zanting" style="font-size: 20px"></p>
          <p>播放全部</p>
          <p>(共{{ this.songs.length - 1 }}首)</p>
        </div>
        <div class="main-top-right">
          <p style="font-size: 30px">+</p>
          <p>收藏</p>
          <p>(6291)</p>
        </div>
      </div>
    </div>
    <div
      class="footer"
      v-for="(item, index) in songs"
      :key="item.id"
      @click="toplay(item.id)"
    >
      <p class="p1">{{ index + 1 }}</p>
      <div class="footer-t">
        <p class="p2">{{ item.name }}</p>
        <div class="footer-m">
          <p class="p3">独家</p>
          <p class="p4">SQ</p>
          <p class="p5">{{ item.song.artists[0].name }}</p>
        </div>
      </div>
      <div class="footer-r">
        <p class="icon iconfont icon-zanting"></p>
        <p class="iconfont icon-24gf-ellipsisVertical"></p>
      </div>
    </div>
  </div>
</template>
<script>
import { loadNewsongAPI } from "../services/gedan";
export default {
  data() {
    return {
      songs: [],
    };
  },

  methods: {
    toPinglun(id) {
      this.$router.push({
        name: "Pinglun",
        query: { id },
      });
    },

    tohome() {
      this.$router.push({
        name: "Home",
      });
    },
    toplay(id) {
      this.$router.push({
        name: "Play",
        query: { id },
      });
    },
  },
  async created() {
    const ressong = await loadNewsongAPI();
    this.songs = ressong.result;
    // console.log(this.songs);
    // console.log(this.song.length);
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  background-image: linear-gradient(#e66465, #9198e5);
}
.top {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top p:nth-child(1) {
  color: #fffdf4;
}
.top p:nth-child(2) {
  margin-left: 150px;
  color: #fffdf4;
}
.top p:nth-child(3) {
  margin-left: 90px;
  color: #fffdf4;
}
.top p:nth-child(4) {
  color: #fffdf4;
}
.bod {
  height: 120px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: white;
  justify-content: space-around;
}
.imgs {
  margin-left: 10px;
}
.jieshao p:nth-child(1) {
  margin-top: -15px;
  margin-left: 3px;
  font-size: 14px;
}
.jieshao p:nth-child(3) {
  font-size: 12px;
  margin-left: 10px;
}
.mb {
  height: 35px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
}
.mb p {
  margin-left: 20px;
}
.headr {
  display: flex;
  width: 100%;
  height: 80px;
  justify-content: space-between;
}
.headr-one {
  color: #fffdf4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
}
.headr-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  color: #fffdf4;
}
.headr-three {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  color: #fffdf4;
}
.headr-four {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  color: #fffdf4;
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  text-align: center;
  line-height: 50px;
}
.main-top {
  height: 60px;
  display: flex;
  background-color: #ffffff;
  align-items: center;
  justify-content: space-between;
}
.main-top-left {
  display: flex;
  align-items: center;
}
.main-top-left p:nth-child(3) {
  font-size: 12px;
  color: #b2aea3;
}
.main-top-right {
  height: 40px;
  width: 100px;
  margin-right: 10px;
  background-color: #ea4f3d;
  display: flex;
  align-items: center;
  border-radius: 17px;
  justify-content: space-around;
  color: #fffdf4;
}
.main-top-right p:nth-child(3) {
  font-size: 12px;
  color: #b2aea3;
}
.footer {
  height: 60px;
  display: flex;
  /* justify-content:space-between */
  justify-content: flex-start;
}
.p1 {
  width: 20px;
  height: 60px;
  margin-left: 5px;
  line-height: 60px;
}
.footer-t {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  justify-content: center;
}

.footer-m {
  display: flex;
  align-items: center;
  margin-left: 90px;
}
.p2 {
  width: 190px;
  margin-left: 90px;
  justify-content: center;
}
.p3 {
  font-size: 14px;
  color: red;
  border: 1px solid red;
}
.p4 {
  font-size: 14px;
  margin-left: 5px;
  margin-top: 4px;
  color: red;
  border: 1px solid red;
}
.p5 {
  font-size: 14px;
  color: #b2aea3;
  margin-left: 10px;
}
.footer-r {
  display: flex;
  align-items: center;
}
</style>
